<template>
  <div class="record-page">
    <!-- 基本信息卡片 -->
    <el-card class="info-card" shadow="hover">
      <h3 class="section-title">基本信息</h3>
      <div class="info-wrapper">
        <div class="info-columns-container">
          <div class="info-column left">
            <div class="info-item">
              <span class="label">老人姓名：</span>
              <span class="value">{{ basicData.elderName || '高启强' }}</span>
            </div>
            <div class="info-item">
              <span class="label">性别：</span>
              <span class="value">{{ basicData.sex === 'female' ? '女' : '男' || '男' }}</span>
            </div>
            <div class="info-item">
              <span class="label">床位号：</span>
              <span class="value">{{ basicData.bedNumber || '1011' }}</span>
            </div>
          </div>
          <div class="info-column right">
            <div class="info-item">
              <span class="label">护理等级：</span>
              <span class="value">{{ basicData.nursingLevel || '一级护理等级' }}</span>
            </div>
            <div class="info-item">
              <span class="label">年龄：</span>
              <span class="value">{{ basicData.age || '43岁' }}</span>
            </div>
            <div class="info-item">
              <span class="label">护理员姓名：</span>
              <span class="value">{{ basicData.nursingStaffName || '顾廷烨、盛明兰、盛如兰' }}</span>
            </div>
          </div>
        </div>
        <div class="avatar-box">
          <el-image
            :src="basicData.avatar || defaultAvatar"
            :preview-src-list="[basicData.avatar || defaultAvatar]"
            :preview-options="{ center: true }"
            fit="cover"
            class="avatar"
          />
        </div>
      </div>
    </el-card>

    <!-- 护理项目卡片 -->
    <el-card class="info-card" shadow="hover" style="margin-top: 0;">
      <h3 class="section-title">护理项目</h3>
      <div class="info-wrapper">
        <div class="info-column left">
          <div class="info-item">
            <span class="label">护理项目名称：</span>
            <span class="value">{{ projectData.projectName || '洗头' }}</span>
          </div>
          <div class="info-item">
            <span class="label">执行状态：</span>
            <span class="value" :style="{ color: projectData.status === 3 ? '#909399' : '' }">
              {{ projectData.status === 1 ? '待执行' : projectData.status === 2 ? '已执行' : '已取消' }}
            </span>
          </div>
          <div class="info-item">
            <span class="label">创建人：</span>
            <span class="value">{{ projectData.taskType === 2 ? '系统' : projectData.creator || '顾廷烨' }}</span>
          </div>
          <div class="info-item">
            <span class="label">期望服务时间：</span>
            <span class="value">{{ projectData.estimatedServerTime || '2022-10-05 15:00:00' }}</span>
          </div>
        </div>
        <div class="info-column right">
          <div class="info-item">
            <span class="label">关联单据：</span>
            <span class="value">{{ projectData.relNo || 'ZD204810101500110012' }}</span>
          </div>
          <div class="info-item">
            <span class="label">项目类型：</span>
            <span class="value">{{ projectData.taskType === 2 ? '护理计划内' : '护理等级外' }}</span>
          </div>
          <div class="info-item">
            <span class="label">创建时间：</span>
            <span class="value">{{ projectData.createTime || '2022-10-04 15:00:00' }}</span>
          </div>
          <div class="info-item">
            <span class="label">备注信息：</span>
            <span class="value">{{ projectData.remark || '给老人洗澡的时候注意一下，要用老人自带的沐浴液' }}</span>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 取消记录卡片 -->
    <el-card class="info-card" shadow="hover" style="margin-top: 0;">
      <h3 class="section-title">取消记录</h3>
      <div class="info-wrapper">
        <div class="info-column left">
          <div class="info-item">
            <span class="label">取消人：</span>
            <span class="value">{{ cancelData.canceler || '顾廷烨' }}</span>
          </div>
          <div class="info-item">
            <span class="label">取消时间：</span>
            <span class="value">{{ cancelData.cancelTime || '2022-10-05 15:00:00' }}</span>
          </div>
          <div class="info-item">
            <span class="label">取消原因：</span>
            <span class="value">{{ cancelData.reason || '高先生头部有伤口无法洗头。' }}</span>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
defineProps({
  basicData: {
    type: Object,
    default: () => ({})
  },
  projectData: {
    type: Object,
    default: () => ({ status: 3 }) // 默认为“已取消”状态
  },
  cancelData: {
    type: Object,
    default: () => ({})
  }
})

const defaultAvatar = 'https://yjy-slwl-oss.oss-cn-hangzhou.aliyuncs.com/61032c27-43eb-49cc-86df-ba8cbeb2c27d.png'; // 无头像时的占位图
</script>

<style scoped>
.record-page {
  padding: 20px;
}

.info-card {
  margin-bottom: 0; /* 消除卡片间默认间距 */
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 16px;
}

.info-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 16px;
}

.info-columns-container {
  display: flex;
  width: calc(100% - 120px); /* 给头像预留宽度 */
  justify-content: space-between;
}

.info-column {
  display: flex;
  flex-direction: column;
  width: 48%;
}

.info-item {
  display: flex;
  margin-bottom: 12px;
  align-items: center;
}

.label {
  width: 140px;
  color: #606266;
  white-space: nowrap;
}

.value {
  color: #303133;
  white-space: nowrap;
}

.avatar-box {
  width: 90px;
  height: 90px;
  align-self: flex-start;
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}
</style>